<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/css3_现代web布局_08.md.CKAlv-cw.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible has-active" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>现代web布局</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Web 布局技术演进：了解 Web 布局发展史</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/02" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>现代 Web 布局技术术语</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/03" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局基础使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/04" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的对齐方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/05" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex 属性的基础运用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/06" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/07" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/08" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/09" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>使用 Flexbox 构建经典布局：10 种经典 Web 布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/10" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>postcss</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/postcss/postcss-prefix-selector%E5%A2%9E%E5%8A%A0%E7%BB%9F%E4%B8%80%E4%BD%9C%E7%94%A8%E5%9F%9F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>postcss-prefix-selector增加统一作用域</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_css3_%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80_08" data-v-e512d8d8><div><p><code>flex-basis</code> 是 Flexbox 布局模块中 <code>flex</code> 属性的另一个子属性，在前面的课程中我们深度剖析了浏览器是如何计算 Flex 项目尺寸的，或者说 Flexbox 是如何工作的。对于众多 Web 开发者而言，在 CSS 中都习惯于使用像 <code>width</code> 、<code>height</code> 、<code>min-*</code> 和 <code>max-*</code> 以及它们对应的 CSS 逻辑属性（比如 <code>inline-size</code> 、<code>block-size</code> 等）给元素设置尺寸大小。</p><p>在使用 Flexbox 布局模块时，同样如此，使用这些属性给 Flex 项目设置尺寸。只不过，这些属性不一定就能决定 Flex 项目的尺寸大小，它除了受 Flex 容器的空间和 Flex 项目的扩展因子（<code>flex-grow</code>），以及 Flex 项目的收缩因子（<code>flex-shrink</code>）影响之外，还受 Flex 项目的基准值（或者说假设主尺寸 Main Size）的影响，即 <code>flex-basis</code> 属性的影响。</p><p>在这节课程中，我们就一起来探讨这方面的话题，<strong>在 Flexbox 布局中，Flex 项目的大小究竟是由谁来决定的</strong> 。</p><h2 id="容器的尺寸由谁来决定" tabindex="-1">容器的尺寸由谁来决定 <a class="header-anchor" href="#容器的尺寸由谁来决定" aria-label="Permalink to &quot;容器的尺寸由谁来决定&quot;">​</a></h2><p>Web 上的每一个元素都被视为一个盒子，它相当于一个容器，就好比我们生活中的器皿，通过格式化（CSS 的 <code>display</code> 属性的值）之后有着不同的形态：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4ed7e93860a4f449f7415b0e29d3a84~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>不同的器皿都有着自己的大小。在 CSS 中，这些容器的大小可以是由容器的内容来决定，也可以显式地通过属性来控制。大家最为熟知的应该是 <strong>CSS 盒模型中的属性来决定一个容器（元素）的大小</strong> 。</p><p>只不过在指定容器大小时，你可能是 <strong>明确地知道容器的确切尺寸</strong> ，也有可能是<strong>由着容器的内容来决定尺寸大小</strong> 。简单地说，就是一个是<strong>明确的尺寸</strong> （Definite Size），一个是<strong>不确定的尺寸</strong> （Indefinite Size）。</p><ul><li><strong>明确的尺寸</strong> 指的是不需要执行布局就可以确定盒子的大小。也就是说，显式地给容器设置一个固定值，或内容所占区域的大小，或一个容器块的初始大小，或通过其他计算方式得到的尺寸，比如 Flexbox 布局中的“拉伸和收缩”（Stretch-fit），即 <code>flex-grow</code> 和 <code>flex-shrink</code> 。</li></ul><ul><li><strong>不确定的尺寸</strong> 指的是一个未知的尺寸。也就是说，容器的大小具备无限空间，有可能很大，也有可能很小。</li></ul><p>通俗来说，明确的尺寸是知道元素的 <code>width</code> （或 <code>inline-size</code>）和 <code>height</code> （或 <code>block-size</code>）属性的确定值；不确定的尺寸是需要根据内容来计算的，所以要知道不确定的尺寸就需要先检查内容，也就是自动计算尺寸。</p><p>但不管是明确的尺寸还是不确定的尺寸设置，在 CSS 中都是由下面这些属性来控制：</p><table><thead><tr><th><strong>物理属性</strong></th><th><strong>逻辑属性（horizontal-tab）</strong></th><th><strong>逻辑属性（vertical-lr）</strong></th><th><strong>逻辑属性（vertical-rl）</strong></th></tr></thead><tbody><tr><td><code>width</code></td><td><code>inline-size</code></td><td><code>block-size</code></td><td><code>block-size</code></td></tr><tr><td><code>height</code></td><td><code>block-size</code></td><td><code>inline-size</code></td><td><code>inline-size</code></td></tr><tr><td><code>min-width</code></td><td><code>min-inline-size</code></td><td><code>min-block-size</code></td><td><code>min-block-size</code></td></tr><tr><td><code>min-height</code></td><td><code>min-block-size</code></td><td><code>min-inline-size</code></td><td><code>min-inline-size</code></td></tr><tr><td><code>max-width</code></td><td><code>max-inline-size</code></td><td><code>max-block-size</code></td><td><code>max-block-size</code></td></tr><tr><td><code>max-height</code></td><td><code>max-block-size</code></td><td><code>max-inline-size</code></td><td><code>max-inline-size</code></td></tr></tbody></table><p>这些属性被称为 <strong>尺寸属性</strong> ，它们可以接受 <code>&lt;length-percentage&gt;</code> 、<code>auto</code> 、<code>none</code> 、<code>min-content</code> 、<code>max-content</code> 和 <code>fit-content</code> （CSS Grid 中还有一个 <code>fit-content()</code>）等值。其中 <code>&lt;length-percentage&gt;</code> 分为 <code>&lt;length&gt;</code> （就是使用长度单位的一些值，比如 <code>100px</code> 、<code>100vw</code> 等），<code>&lt;percentage&gt;</code> 指的是百分比单位的值，比如 <code>50%</code> 。</p><p>一般情况下，CSS 尺寸属性的值是一个 <strong><code>&lt;length-percentage&gt;</code></strong> 的话，则表示这个容器有一个明确的尺寸；如果 CSS 尺寸属性的值是像 <code>auto</code> 、<code>min-content</code> 、<code>max-content</code> 和 <code>fit-content</code> 的话，则表示这个容器的尺寸是不明确的，需要根据内容来计算。</p><blockquote><p><strong>注意，<code>fit-content</code>和</strong> <strong><code>fit-content(&lt;length-percentage&gt;)</code></strong> <strong>所描述的不是同一个东西，它们的区别将放到 CSS Grid 相关的课程中介绍</strong> 。</p></blockquote><p>换句话说，在 CSS 中，任何一个容器都有四种自动计算尺寸大小的方式：</p><ul><li><code>auto</code> ：会根据格式化上下文自动计算容器的尺寸；</li></ul><ul><li><code>min-content</code> ：是在不导致溢出的情况下，容器的内容的最小尺寸；</li></ul><ul><li><code>max-content</code> ：容器可以容纳的最大尺寸，如果容器中包含未格式化的文本，那么它将显示为一个完整的长字符串；</li></ul><ul><li><code>fit-content</code> ：如果给定轴中的可用空间是确定的，则等于 <code>min(max-content, max(min-content, stretch-fit))</code> ，反之则等于 <code>max-content</code>。</li></ul><blockquote><p>需要注意的是， CSS 中的宽高比属性，即 <code>aspect-ratio</code> 也可以决定一个容器的尺寸。</p></blockquote><p>在 Flexbox 布局中，Flex 项目同样被视为一个容器，它的大小也可以由这些属性（尺寸属性）和尺寸属性值来决定。只不过，对于 Flex 项目而言，除了这些尺寸属性之外，它还有一个 <strong><code>flex-basis</code></strong> <strong>属性可用于控制尺寸大小</strong> 。</p><h2 id="flex-basis-在-flexbox-中的作用" tabindex="-1">flex-basis 在 Flexbox 中的作用 <a class="header-anchor" href="#flex-basis-在-flexbox-中的作用" aria-label="Permalink to &quot;flex-basis 在 Flexbox 中的作用&quot;">​</a></h2><p><code>flex-basis</code> 属性在 Flexbox 中对 Flex 项目尺寸起着决定性的作用。简单地说，<strong><code>flex-basis</code></strong> <strong>属性在任何空间分配发生之前，会对 Flex 项目的尺寸大小进行初始化</strong> 。即，<strong>在任何 Flex 容器空间（剩余空间或不足空间）分配发生之前初始化 Flex 项目尺寸</strong> 。</p><blockquote><p>Flexbox 中 Flex 容器的空间是由 <code>flex-grow</code> 、<code>flex-shrink</code> 和 Flex 容器的对齐方式来分配的。详细请参阅前面的课程：《<a href="https://juejin.cn/book/7161370789680250917/section/7161623670622781471" target="_blank" rel="noreferrer">04 | Flexbox 布局中的对齐方式</a> 》、 《<a href="https://juejin.cn/book/7161370789680250917/section/7161623797794078750" target="_blank" rel="noreferrer">06｜Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</a>》和《<a href="https://juejin.cn/book/7161370789680250917/section/7164357320367931399" target="_blank" rel="noreferrer">07｜Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</a>》。</p></blockquote><p><code>flex-basis</code> 属性的语法规则很简单：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>flex-basis: content | &lt;width&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>该属性的默认值是 <code>auto</code> ，它可以接受 <code>content</code> 和 <code>&lt;width&gt;</code> 值。</p><ul><li><code>&lt;width&gt;</code> 值指的是 CSS 的 <code>width</code> 属性（尺寸属性），可用于 <code>width</code> 属性的值都可以用于 <code>flex-basis</code> ，比如我们熟悉的 <code>px</code> 、<code>%</code> 、<code>vw</code> 等，以及需要根据内容自动计算的属性值，比如 <code>min-content</code> 、<code>max-content</code> 和 <code>fit-content</code> 等。</li></ul><ul><li><code>content</code> 是指 Flex 项目的内容的自动尺寸，它通常相当于 Flex 项目最大内容大小（<code>max-content</code>）。</li></ul><p>如果 <code>flex-basis</code> 的值设置为 <code>auto</code> ，浏览器将先检查 Flex 项目的主尺寸（Main Size）是否设置了绝对值，再计算 Flex 项目的初始值。比如说，你给 Flex 项目显式设置了 <code>width: 200px</code>，那么 <code>200px</code> 就是 Flex 项目的 <code>flex-basis</code> 值，该值也被称为是 Flex 项目的假设主尺寸，因为 Flex 项目的最终主尺寸（<code>flex-basis</code> 计算后的值）会受 Flex 容器剩余空间或不足空间的影响，除非 <code>flex-grow</code> 和 <code>flex-shrink</code> 两属性的值都显式设置为 <code>0</code> 。</p><p>如果 Flex 项目可以自动调整大小，则 <code>auto</code> 会解析为其内容的大小，此时 <code>min-content</code> 和 <code>max-content</code> 就会起作用，并且 Flex 项目的 <code>flex-basis</code> 值将会是 <code>max-content</code> 。</p><p>有一点需要注意的是，如果在 <code>flex-basis</code> 属性上设置了除 <code>auto</code> 和 <code>content</code> 之外的所有值，它和书写模式以及阅读模式是有关的，在水平书写模式（<code>ltr</code> 或 <code>rtl</code>），<code>flex-basis</code> 的解析方式与 <code>width</code> 相同。</p><p>不同的是，如果一个值对于 <code>width</code> 将解析为 <code>auto</code> ，那么该值对于 <code>flex-basis</code> 就会被解析为 <code>content</code>。例如，<code>flex-basis</code> 的值是一个百分比值，那么它会相对于 Flex 容的主轴尺寸（Main Size）来计算；如果 Flex 容器的大小不确定时，则 <code>flex-basis</code> 使用的值会是 <code>content</code>。</p><h2 id="可用于-flex-basis-属性的值" tabindex="-1">可用于 flex-basis 属性的值 <a class="header-anchor" href="#可用于-flex-basis-属性的值" aria-label="Permalink to &quot;可用于 flex-basis 属性的值&quot;">​</a></h2><blockquote><p><strong>可用于 CSS 的尺寸属性，比如</strong> <strong><code>width</code></strong> <strong>的值都可用于</strong> <strong><code>flex-basis</code></strong> <strong>属性上。</strong></p></blockquote><p>现在我们知道了，<code>flex-basis</code> 属性可以取 <code>&lt;width&gt;</code> 值来对 Flex 项目的主尺寸进行初始化，而一般情况之下，这个 <code>&lt;width&gt;</code> 就好比 CSS 中的 <code>width</code> 属性。为了更好地帮大家理解 <code>flex-basis</code> 取 <code>&lt;width&gt;</code> 中所起的作用，这里有必要花一点时间来重温 <code>width</code> 属性。</p><blockquote><p><strong>特别注意，这里的</strong> <strong><code>&lt;width&gt;</code></strong> <strong>是一个属性值，即</strong> <strong><code>flex-basis</code></strong> <strong>属性的值；而</strong> <strong><code>width</code></strong> <strong>却是一个 CSS 的尺寸属性，用于设置元素宽度的尺寸，它的值类型种类多样</strong> 。</p></blockquote><p>你可以给任何一个<strong>非内联</strong>元素显式设置一个 <code>width</code> 属性，用来指定容器的宽度。只不过不同的属性值渲染出来的结果有所差异。比如下面这样的一个示例：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>:root {</span></span>
<span class="line"><span>  --width: auto;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>  width: var(--width);</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98764f2b62374bb2b2d943661f0f33f0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/wvjqXrZ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/wvjqXrZ</a></p></blockquote><p>正如上图所示，当给一个容器的 <code>width</code> 属性设置一个固定值时，有一个极大的缺陷，即 <strong>内容断行</strong> 或 <strong>内容溢容器</strong> ，尤其是内容溢出，它很有可能就会打破布局的美观。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f8fef213674ad59da5dfe7987ec65b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><strong>很多时候，Web 开发者并不知道容器的内容是什么，所占的宽度是多少，就会造成上图的现象。哪怕是使用了</strong> <strong><code>min-content</code></strong> <strong>、<code>max-content</code>和</strong> <strong><code>fit-content</code></strong> <strong>也会面临类似现象</strong> 。</p><p>为此，为了尽可能避免这种缺陷的出现，在给容器设置尺寸的时候，更建议使用 <code>min-width</code> 来替代 <code>width</code> 属性。首先能被运用于 <code>width</code> 属性的值都可以用在 <code>min-width</code> 属性上。不同的是，<code>min-width</code> 可以防止 <code>width</code> 值小于 <code>min-width</code> 指定的值所造成的布局缺陷。</p><blockquote><p><strong>注意，<code>min-width</code>的默认值是<code>auto</code>，浏览器计算出来的值是<code>0</code></strong> 。</p></blockquote><p>在上面的示例中，我们知道容器 <code>width</code> 设置的值小于内容宽度的时候，会造成一定的缺陷（我们不希望看到的效果）。如果在上面的示例中，在 <code>.item</code> 上添加一个 <code>min-width</code> 就可以较好避免这种现象：</p><p>暂时无法在飞书文档外展示此内容</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a38b58a0fbfd4372a77d465f55998f3b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/ZEoJjEK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/ZEoJjEK</a></p></blockquote><p>你可能会好奇，那么应该给容器的 <code>min-width</code> 属性设置一个什么样的值呢？一般情况之下，这是根据元素所在的环境来决定的。它是一个假想的理想值。</p><p><code>min-width</code> 属性在构建 Web 布局或 Web 组件时是很有用处的，尤其是在构建一个<strong>多语言</strong> 的 Web 页面或 Web 应用中。在多语言版本网站中“<strong>表达同一个意思的文本内容所占宽度是不一致的</strong> ”，比如一个“完成”按钮，中文可能是“完成”，英文可能是“Done”，阿位伯文是“إنجاز”，韩文是“완료”，日文可能是“フィニッシュ”，蒙古语又是“Дуусга”，等等。</p><p>当你从中文切换到阿位伯文（或英文切换到阿位伯文）时，文本内容的所占宽度并不一致。如果未显式给容器设置 <code>width</code> 或 <code>min-width</code> 属性的值，就会造成按钮大小不一致，这也有可能会影响 Web 布局或整体的视觉效果。如果显式加上 <code>width</code> 就有可能会在某个语种下造成内容溢出或断行，那么这个时候显式设置一个 <code>min-width</code> 就会有一个较好的视觉效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88841eb47a5a404b9befda0fe407c3b1~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/dyezjZL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/dyezjZL</a></p></blockquote><p>使用 <code>min-width</code> 的好处大家都看到了，在内容较长的按钮上，<code>min-width</code> 可以扩展容器的宽度，在内容较少的按钮上，具有统一的尺寸。</p><p><code>min-width</code> 除了在一些多语言版本网站上可见之外，也适用于像“徽标”（Badge）这样的组件：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d057060c0ffe455395713dba16b1c8b2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在构建这样的标签列表时，建议限制一个标签的最小宽度（即显式设置 <code>min-width</code> 属性的值），这样就可以保证标签列表项内容很短（少）时，它的外观不会受到影响：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10b4418ce0e24d119e1c69279f960583~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>有了这种灵活性，无论标签内容有多短，标签在视觉上看起来都不错。另外，除了考虑内容过短之外，我们还需要考虑内容过长时对 UI 的视觉影响，这时候我们可以考虑使用 <code>max-width</code> 属性。</p><p>在容器（或元素）上显式设置 <code>max-width</code> 属性值时，可以防止 <code>width</code> 属性值超过了 <code>max-width</code> 指定的值，造成内容溢出。<code>max-width</code> 的一个常见而简单的用例是将它与图像一起使用。考虑下面的例子：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c4f78dd7f6748b994140ae370e262ac~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><img> 比它的父容器更大。通常给 img 设置 max-width 的值为 100% ，图像的宽度就不会超过容器的宽度。如果图像比父容器小，则 max-width: 100% 不会对图像产生实际影响，因为它比容器小。</p><p>也就是说，CSS 中的 <code>width</code> 、<code>min-width</code> 和 <code>max-width</code> 都可以用来设置元素的宽度。很多时候，在实际的使用过程中，可能会在同一个元素上使用多个属性来设置容器的宽度。比如：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 100px;</span></span>
<span class="line"><span>    min-width: 200px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 或 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 200px;</span></span>
<span class="line"><span>    max-width: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 或 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    min-width: 100px;</span></span>
<span class="line"><span>    max-width: 200px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 或 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    min-width: 100px;</span></span>
<span class="line"><span>    max-width: 200px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>那么问题来了，它们都是用来指定容器宽度的，当同一个容器上使用它们时，究竟由谁来决定容器最终的尺寸。</p><p>虽然说 <code>width</code> 、 <code>min-width</code> 和 <code>max-width</code> 三个属性都可以用来指定一个容器的宽度，但它们之间还是有一定的差异的，比如说：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    min-width: 100px;</span></span>
<span class="line"><span>    max-width: 200px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>上面这段代码将会告诉浏览器，<code>.item</code> 元素的宽度是 <code>150px</code> （由<code>width</code> 指定），但它不能小于 <code>100px</code> (由 <code>min-width</code> 指定) ，且不能大于 <code>200px</code> （由 <code>max-width</code> 指定）。不难发现，其中 <code>min-width</code> 和 <code>max-width</code> 属性像是给容器的宽度做了一定的限制。也就是说，当符合某一条件时，其中就有一个属性起作用。这个也有点类似于 CSS 选择器权重一样，看谁的权重大，谁就起作用。</p><p>为了搞清楚，它们之间权重是如何比较（谁决定谁），我们这里通过几个简单的示例来向大家阐述。先来看 <code>width</code> 和 <code>min-width</code> 两者的关系。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>button {</span></span>
<span class="line"><span>    width: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* width &gt; min-width */</span></span>
<span class="line"><span>.case1 button:nth-child(2) {</span></span>
<span class="line"><span>    min-width: 80px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* width = min-width */</span></span>
<span class="line"><span>.case2 button:nth-child(2) {</span></span>
<span class="line"><span>    min-width: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* width &lt; min-width */</span></span>
<span class="line"><span>.case3 button:nth-child(2) {</span></span>
<span class="line"><span>    min-width: 140px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98cc221e01094e7baf5e537f8c732a71~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/qBYXJWq" target="_blank" rel="noreferrer">https://codepen.io/airen/full/qBYXJWq</a></p></blockquote><p>从这个示例中我们可以得到一个简单的结论：</p><blockquote><p><strong>当<code>width</code>属性的值大于或等于<code>min-width</code>属性的值时，浏览器会取<code>width</code></strong> <strong>属性的值；当</strong> <strong><code>width</code></strong> <strong>属性的值小于</strong> <strong><code>min-width</code></strong> <strong>属性的值时，浏览器会取</strong> <strong><code>min-width</code></strong> <strong>属性的值</strong> 。</p></blockquote><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>if (width &gt;= min-width) {</span></span>
<span class="line"><span>    浏览器取 width 属性的值</span></span>
<span class="line"><span>} </span></span>
<span class="line"><span></span></span>
<span class="line"><span>if (width &lt; min-width) {</span></span>
<span class="line"><span>    浏览器取 min-width 属性的值</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>把上面示例中的 <code>min-width</code> 换成 <code>max-width</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>button {</span></span>
<span class="line"><span>    width: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* width &gt; max-width */</span></span>
<span class="line"><span>.case1 button:nth-child(2) {</span></span>
<span class="line"><span>    max-width: 80px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* width = max-width */</span></span>
<span class="line"><span>.case2 button:nth-child(2) {</span></span>
<span class="line"><span>    min-width: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* width &lt; max-width */</span></span>
<span class="line"><span>.case3 button:nth-child(2) {</span></span>
<span class="line"><span>    max-width: 140px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa7985a8498a43ea9867dea94e9df8f1~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/WNJEaOq" target="_blank" rel="noreferrer">https://codepen.io/airen/full/WNJEaOq</a></p></blockquote><p>从这个示例中，我们可以得到这样的一个结论：</p><blockquote><p><strong>当</strong> <strong><code>width</code></strong> <strong>属性的值大于</strong> <strong><code>max-width</code></strong> <strong>属性的值时，浏览器会取</strong> <strong><code>max-width</code></strong> <strong>属性的值；当</strong> <strong><code>width</code></strong> <strong>属性的值小于或等于</strong> <strong><code>max-width</code></strong> <strong>属性的值时，浏览器会取</strong> <strong><code>width</code></strong> <strong>属性的值</strong> 。</p></blockquote><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>if (width &gt; max-width) {</span></span>
<span class="line"><span>    浏览器取 max-width 属性的值</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>if (width =&lt; max-width) {</span></span>
<span class="line"><span>    浏览器取 width 属性的值</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>也有时候，在同一个元素上显式设置 <code>width</code> 、<code>min-width</code> 和 <code>max-width</code> ，或者只在元素上显式设置 <code>min-width</code> 和 <code>max-width</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f0180d6e5cb4c4986921654d179d3c7~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/GRdvYdw" target="_blank" rel="noreferrer">https://codepen.io/airen/full/GRdvYdw</a></p></blockquote><p>正如上面这个示例所示：</p><blockquote><p><strong>如果</strong> <strong><code>min-width</code></strong> <strong>属性的值大于</strong> <strong><code>max-width</code></strong> <strong>属性的值，浏览器会将</strong> <strong><code>min-width</code></strong> <strong>属性的值作为容器（元素）的宽度；如果</strong> <strong><code>min-width</code>属性的值小于<code>max-width</code>属性的值，则会取<code>max-width</code>属性的值</strong> 。</p></blockquote><p>如果它们同时出现在一个容器上，可以按照下面的规则来决定元素的宽度：</p><ul><li>元素的 <code>width</code> 大于或等于 <code>max-width</code> 时，取 <code>max-width</code> ，即 <strong><code>max-width</code></strong> <strong>能覆盖</strong> <strong><code>width</code></strong> ；</li></ul><ul><li>元素的 <code>width</code> 小于或等于 <code>min-width</code> 时，取 <code>min-width</code> ，即 <strong><code>min-width</code></strong> <strong>能覆盖</strong> <strong><code>width</code></strong> ；</li></ul><ul><li>当 <code>min-width</code> 大于 <code>max-width</code> 时，取 <code>min-width</code> ，即 <strong><code>min-width</code></strong> <strong>优先级将高于</strong> <strong><code>max-width</code></strong> 。</li></ul><blockquote><p><strong>注意，上面这个规则同样适用于 CSS 的<code>min-height</code>、<code>height</code>和<code>max-height</code>以及它们对应的 CSS 逻辑属性，比如<code>min-inline-size</code>、<code>inline-size</code>和<code>max-inline-size</code>；<code>min-block-size</code>、<code>block-size</code>和<code>max-block-size</code></strong> 。</p></blockquote><p>CSS 中给元素设置一个尺寸时，除了设置具体值之外，还可以通过一些数学表达式来给其设置值，比如 <code>calc()</code> 、<code>min()</code> 、<code>max()</code> 和 <code>clamp()</code> 等比较函数：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.calc {</span></span>
<span class="line"><span>    width: calc(100vw - var(--sideba-width) - var(--gap));</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.min {</span></span>
<span class="line"><span>    width: min(300px, 100%);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.max {</span></span>
<span class="line"><span>    width: max(300px, 30vw);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.clamp {</span></span>
<span class="line"><span>    width: clamp(300px, 300px + 15%, 400px);</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>其中 <code>min()</code> 、<code>max()</code> 可以传入多个值，而且它们：</p><ul><li><code>min()</code> 可用来给元素设置一个最大值，相当于 <code>max-width</code>；</li></ul><ul><li><code>max()</code> 可用来给元素设置一个最小值，相当于 <code>min-width</code>。</li></ul><p>也就是说：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    max-width: 300px;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    /* 等同于 */</span></span>
<span class="line"><span>    width: min(300px, 100%);</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 100%;</span></span>
<span class="line"><span>    min-width: 280px;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    /* 等同于 */</span></span>
<span class="line"><span>    width: max(280px, 100%);</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>这几个函数是非常有用的，它们同样也可以用于 <code>flex-basis</code> 属性上。而且使用它们可以帮助 Web 开发者构建<strong>响应式</strong> <strong>UI</strong> 。有关于这方面更详细的介绍，将单独放到后面的课程中，这里你只需要知道，我们可以在尺寸属性上使用这些函数，做一些简单的四则运算即可。</p><p>除了上面提到这些方式可以给一个容器设置宽度之外，你还可以给 <code>width</code> 属性显式设置 <code>min-content</code> 、<code>max-content</code> 和 <code>fit-content</code> 值。即能根据元素内容来决定元素大小，因此它们统称为<strong>内部尺寸</strong> 。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;h1&gt; CSS is Awesome&lt;/h1&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>h1 {</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca27e5c2cb09431394a5ee5b51f327ac~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/RwyLGmg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/RwyLGmg</a></p></blockquote><p>由于 <code>&lt;h1&gt;</code> 是一个块元素，如果没有显式使用<code>display</code> 或它的父元素未改变上下文格式（比如父元素没有显式设置 <code>display</code> 属性的值），那么 <code>width</code> 取值为 <code>auto</code> 时，它的宽度和其父元素的宽度等同（有点类似于 <code>100%</code> 的效果）。当其父容器宽度变小时，它也会跟着变小，小到 <code>0</code> 。其内容在没有做其他样式处理时（比如强制不断行 <code>white-space: nowrap</code>），内容会自动断行。</p><p>如果你把 <code>width</code> 属性的值设置为 <code>min-content</code> 时：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* 外在尺寸 */</span></span>
<span class="line"><span>h1 {</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 内在尺寸*/</span></span>
<span class="line"><span>h1 {</span></span>
<span class="line"><span>    width: min-content;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/180bba994afa463eb3f22b2c64e6da92~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/gOzGLYo" target="_blank" rel="noreferrer">https://codepen.io/airen/full/gOzGLYo</a></p></blockquote><p>从上图中不难发现，<code>width</code> 取值为 <code>min-content</code> 时，<code>h1</code> 的宽度始终是单词“<strong>Awesome</strong>”长度（大约是 <code>144.52px</code>）。它的宽度和容器宽度变化并无任何关系，但它受排版内相关的属性影响，比如 <code>font-size</code> 、<code>font-family</code> 等。</p><p>注意，如果 <code>h1</code> 元素内有一个后代元素显式指定了一个固定值，且该元素的宽度大于或等于 <code>min-content</code>，那么 <code>min-content</code> 将会与这个元素宽度相等。</p><p>再来看 <code>max-content</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* 外在尺寸 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 内在尺寸 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: min-content;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: max-content;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f1e20a58e024f39b3fc340c03b6d52a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/jOxGVEd" target="_blank" rel="noreferrer">https://codepen.io/airen/full/jOxGVEd</a></p></blockquote><p>当 <code>h1</code> 的 <code>width</code> 取值为 <code>max-content</code> 时，它的宽度是 <code>h1</code> 所在行所有内容的宽度（有点类似于元素加了 <code>white-sapce: nowrap</code> ，强制不断行时的长度）。最后再来看 <code>fit-content</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* 外在尺寸 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 内在尺寸 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: min-content;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: max-content;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    width: fit-content;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0448e590a9c04218ac34e5b76af61750~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/pen/zYZvGrY" target="_blank" rel="noreferrer">https://codepen.io/airen/pen/zYZvGrY</a></p></blockquote><p>相对而言，<code>fit-content</code> 要比 <code>min-content</code> 和 <code>max-content</code> 复杂得多：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>h1 {</span></span>
<span class="line"><span>    width: fit-content;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    /* 等同于 */</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>    min-width: min-content;</span></span>
<span class="line"><span>    max-width: max-content;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>简单地说，<code>fit-content</code> 相当于 <code>min-content</code> 和 <code>max-content</code>，其取值：</p><ul><li>如果元素的可用空间充足，<code>fit-content</code> 将使用 <code>max-content</code> ；</li></ul><ul><li>如果元素的可用空间不够允足，比 <code>max-content</code> 小点（介于 <code>min-content</code> 至 <code>max-content</code> 之间），那就是用可用空间的值，不会导致内容溢出；</li></ul><ul><li>如果元素的可用空间很小，比 <code>min-content</code> 还小，那就使用 <code>min-content</code>。</li></ul><p>使用下图来描述它们之间的关系：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14bf87e9e26e40cfb40e631d74509c95~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><code>min-content</code> 、<code>max-content</code> 和 <code>fit-content</code> 它们是属性值，可以被运用于 CSS 的尺寸属性上，比如 <code>width</code> 、 <code>height</code> 、<code>inline-size</code> 和 <code>block-size</code> 。同样的，它们也可以用在 <code>flex-basis</code> 属性上。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item:has(img) {</span></span>
<span class="line"><span>    flex-basis: var(--flex-basis, auto)</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c8405d734b64c45b731265411ad7d62~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/VwxMPPq" target="_blank" rel="noreferrer">https://codepen.io/airen/full/VwxMPPq</a></p></blockquote><p>简单小结一下。<code>flex-basis</code> 可以因设置的值不同，所起的功效也将有差异，大致可以分为：</p><ul><li>默认值：<code>auto</code> ，根据内容来计算；</li></ul><ul><li>固定值：<code>&lt;length&gt;</code> ，数值加上固定单位的长度值，比如 <code>100px</code> 、<code>100pt</code> ；</li></ul><ul><li>相对值：<code>&lt;length-percentage&gt;</code> ，数值加上相对单位的值，比如 <code>10rem</code> 、<code>10em</code> 、<code>10ch</code> 、<code>10ex</code> 、<code>10vw</code> 、<code>10vh</code> 和 <code>10%</code> ；</li></ul><ul><li>动态计算值：使用 <code>calc()</code> 、<code>min()</code> 、<code>max()</code> 和 <code>clamp()</code> ，比如 <code>calc(100% - var(--sidebar-width))</code> 、<code>clamp(10rem, 10rem + 2vw, 30rem)</code> ；</li></ul><ul><li>内在尺寸：<code>min-content</code> 、<code>max-content</code> 和 <code>fit-content</code> 。</li></ul><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7a52d47cfd141c7a7f35d32edcf90fb~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/JjvrEVx" target="_blank" rel="noreferrer">https://codepen.io/airen/full/JjvrEVx</a></p></blockquote><h2 id="flex-basis-的计算" tabindex="-1">flex-basis 的计算 <a class="header-anchor" href="#flex-basis-的计算" aria-label="Permalink to &quot;flex-basis 的计算&quot;">​</a></h2><p>现在你已经知道了，在 Flexbox 布局中，<code>flex-basis</code> 是用来初始化 Flex 项目尺寸的，即 <strong>初始化 Flex 项目的主尺寸（Main Size）</strong> ，也被称为“<strong>假设主尺寸</strong> ”。初始设置的 <code>flex-basis</code> 值并不是 Flex 项目的最终主尺寸，因为影响其最终尺寸的因素较多，比如，Flex 容器的剩余空间（或不足空间）、Flex 项目的扩展因子（<code>flex-grow</code> 属性的值 ）、Flex 项目的收缩因子（<code>flex-shrink</code>）、Flex 项目的最小值（<code>min-*</code>）和最大值（<code>max-*</code>），以及 <code>flex-basis</code> 的初始值等等。</p><p>简单地说，<code>flex-basis</code> 的计算分为两个部分。</p><ul><li>由 Flex 容器空间（剩余空间或不足空间），<code>flex-grow</code> 、<code>flex-shink</code> 以及初始化 <code>flex-basis</code> 相关参数计算后的 <code>flex-basis</code> 值。这部分我们在前面的课程中介绍过了，可以阅读《<a href="https://juejin.cn/book/7161370789680250917/section/7161623797794078750" target="_blank" rel="noreferrer">06｜Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</a>》和《<a href="https://juejin.cn/book/7161370789680250917/section/7164357320367931399" target="_blank" rel="noreferrer">07｜Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</a>》。</li></ul><ul><li>指定 Flex 项目尺寸大小的相关属性权重的计算。</li></ul><p>我们这里要和大家一起探讨的就是第二个部分，即 <strong>指定 Flex 项目尺寸大小的相关属性权重的计算</strong> 。也就是说，当 Flex 项目上同时出现 <code>flex-basis</code> 、<code>width</code> （或 <code>inline-size</code>）、<code>min-width</code> （或 <code>min-inline-size</code>）和 <code>max-width</code> （或 <code>max-block-size</code>） 时，究竟是谁最有决定权。</p><blockquote><p>需要特别声明的是，这部分的计算是指 Flex 项目的假设主尺寸，就是在参与 <code>flex-grow</code> 、<code>flex-shrink</code> 计算之前，Flex 项目的初始化尺寸由谁来决定。</p></blockquote><p>事实上，在 Flexbox 布局模块 <strong>初始化 Flex 项目的尺寸时存在一个隐式的公式</strong> ，即：</p><blockquote><p><strong><code>content</code></strong> ➜ <strong><code>width</code></strong> ➜ <strong><code>flex-basis</code></strong></p></blockquote><p>它的意思是，<strong>如果 Flex 项目未显式指定</strong> <strong><code>flex-basis</code></strong> <strong>属性的值，那么</strong> <strong><code>flex-basis</code></strong> <strong>将回退到</strong> <strong><code>width</code></strong> <strong>属性；如果 Flex 项目同时都未显式指定</strong> <strong><code>flex-basis</code></strong> <strong>和</strong> <strong><code>width</code></strong> <strong>属性的值，那么</strong> <strong><code>flex-basis</code></strong> <strong>将回退到基于 Flex 项目的内容计算宽度</strong> 。</p><p>不过，最终决定 Flex 项目尺寸大小时，还会受 <code>flex-grow</code> 和 <code>flex-shrink</code> 以及 Flex 容器大小的影响，并且 Flex 项目的最终尺寸也会受 <code>min-width</code> （或 <code>min-inline-size</code> )和 <code>max-width</code> （或 <code>max-inline-size</code> ）属性值的限制。</p><p>接下来用一个简单的示例来阐述 Flex 项目的内容（<code>content</code>）、<code>width</code> 以及 <code>flex-basis</code> 对 Flex 项目尺寸的影响。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>&lt;div class=&quot;container&quot;&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;item&quot;&gt;&lt;span&gt;A&lt;/span&gt;longlonglongword&lt;/div&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;item&quot;&gt;&lt;span&gt;B&lt;/span&gt;ook&lt;/div&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;item&quot;&gt;&lt;span&gt;C&lt;/span&gt;ountries&lt;/div&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;item&quot;&gt;&lt;span&gt;D&lt;/span&gt;iscuss&lt;/div&gt;</span></span>
<span class="line"><span>    &lt;div class=&quot;item&quot;&gt;&lt;span&gt;E&lt;/span&gt;astern&lt;/div&gt;</span></span>
<span class="line"><span>&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.container {</span></span>
<span class="line"><span>  display: flex;</span></span>
<span class="line"><span>  inline-size: 1000px;</span></span>
<span class="line"><span>  outline: 2px dashed #09f;</span></span>
<span class="line"><span>  color: #000;</span></span>
<span class="line"><span>  font-size: 1.5rem;</span></span>
<span class="line"><span>  min-block-size: 200px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>示例中的 <code>.item</code> 并没有显式设置任何与尺寸有关的属性（比如 <code>width</code> ），也没有显式设置 <code>flex-basis</code> 属性的值。此时，浏览器会将 Flex 项目的 <code>flex-basis</code> 属性的值当作为 <code>auto</code> ，即：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    flex-basis: auto;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>浏览器同时也会将 Flex 项目的 <code>width</code> 属性的值视为 <code>auto</code> ，即：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    flex-basis: auto;</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>此时，每个 Flex 项目的初始化尺寸由其自身的内容来决定：</p><ul><li>Flex 项目 A 的宽度约是 <code>237.56px</code>；</li></ul><ul><li>Flex 项目 B 的宽度约是 <code>70.26px</code>；</li></ul><ul><li>Flex 项目 C 的宽度约是 <code>120.56px</code>；</li></ul><ul><li>Flex 项目 D 的宽度约是 <code>100.69px</code> ；</li></ul><ul><li>Flex 项目 E 的宽度约是 <code>100.11px</code> 。</li></ul><p>Flex 容器 <code>.container</code> 有足够多的空间来放置这些 Flex 项目：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4af9aa2f2a4a4493af94701ce65b8ed8~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/BaxwRBx" target="_blank" rel="noreferrer">https://codepen.io/airen/full/BaxwRBx</a></p></blockquote><p>注意，所有 Flex 项目的 <code>flex-grow</code> 和 <code>flex-shrink</code> 都采用的是默认值，即：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    flex-grow: 0;</span></span>
<span class="line"><span>    flex-shrink: 1;</span></span>
<span class="line"><span>    flex-basis: auto;</span></span>
<span class="line"><span>    width: auto;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>此时，Flex 项目的初始化尺寸就是 <strong>Flex 项目自身内容（<code>content</code>）来撑开 Flex 项目（浏览器计算值）</strong> 。它和 <code>fit-content</code> 的表现是极其相似的，Flex 容器有足够空间时，它的表现和 <code>max-content</code> 相似，反则它的表现和 <code>min-content</code> 相似。</p><p>不过，要是在 Flex 项目上重置了 <code>flex-shrink</code> 属性的值（显式设置为 <code>0</code> ），Flex 项目不可收缩，那么 <code>flex-basis</code> 和 <code>width</code> 取值为 <code>auto</code> 时，它的表现和 <code>flex-basis</code> 或 <code>width</code> 设置为 <code>max-content</code> 是相同的。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7de40591114421095b37d0692bf4605~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/NWMagjx" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWMagjx</a></p></blockquote><p>由此我们可以得到第一个结论：<strong>如果 Flex 项目的</strong> <strong><code>flex-basis</code></strong> <strong>和</strong> <strong><code>width</code></strong> <strong>取初始值</strong> <strong><code>auto</code></strong> <strong>时，Flex 项目的初始化尺寸是</strong> <strong><code>fit-content</code></strong> <strong>；但当</strong> <strong><code>flex-shrink</code></strong> <strong>显式重置为</strong> <strong><code>0</code></strong> <strong>，Flex 项目不可收缩时，Flex 项目的初始化尺寸就是</strong> <strong><code>max-content</code></strong> 。在这种条件之下，Flex 项目在根据 <code>flex-grow</code> 和 <code>flex-shrink</code> 比例重新计算 <code>flex-basis</code> 是最为复杂的，浏览器可能需要重复循环遍历的计算 <code>flex-basis</code> 的值。</p><p>接下来，显式地在 Flex 项目上给 <code>width</code> 指定一个值，比如 <code>150px</code> ：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    /* 等同于 */</span></span>
<span class="line"><span>    flex-grow: 0;</span></span>
<span class="line"><span>    flex-shrink: 1;</span></span>
<span class="line"><span>    flex-basis: auto;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>将所有宽度为 <code>150px</code> 的 Flex 项目放到一个宽度为 <code>1000px</code> 的 Flex 容器中，Flex 容器有一定的剩余空间出现（即 <code>250px</code>）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d7aa80d50fb406ea07c8f38195c51d2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/VwxMWVO" target="_blank" rel="noreferrer">https://codepen.io/airen/full/VwxMWVO</a></p></blockquote><p>在该示例中，Flex 项目的 <code>flex-basis</code> 没有显式指定，所以会取其默认值 <code>auto</code> ，这个时候会回到 <code>width</code> 属性的值，即 <code>150px</code> 。也就是说，Flex 项目的 <code>flex-basis</code> 初始化尺寸就等于 <code>width</code> 的值。这也印证了：</p><blockquote><p><strong>如果 Flex 项目未显式设置</strong> <strong><code>flex-basis</code></strong> <strong>属性的值，浏览器会采取 Flex 项目上的</strong> <strong><code>width</code></strong> <strong>属性的值</strong> 。</p></blockquote><p>你可能已经发现了，由于在 Flex 项目上设置的 <code>width</code> 值小于 Flex 项目的内容最小尺寸（<code>min-content</code>），将会造成 Flex 项目内容溢出，这和其他溢出容器的表现是一样的。而且 <code>flex-grow</code> 属性使用的也是其初始值 <code>0</code> ，所以 Flex 项目并不会去分配 Flex 容器的剩余空间，除非重置 Flex 项目的 <code>flex-grow</code> 值。</p><p>另外，当 Flex 容器有剩余空间时，即使 Flex 项目的 <code>flex-shrink</code> 值是 <code>1</code> （可收缩），Flex项目的宽度也不会产生变窄的现象（因为只有 Flex 容器空间不足时，Flex 项目才会按照 <code>flex-shink</code> 的比例因子缩小）。</p><p>接着再看另一种情景，当 Flex 项目上同时显式设置了 <code>width</code> 和 <code>flex-basis</code> 时，浏览器又会取哪个值作为 Flex 项目的初始化的宽度呢？比如下面这个示例：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    flex-basis: 100px;</span></span>
<span class="line"><span>    </span></span>
<span class="line"><span>    /* 等同于 */</span></span>
<span class="line"><span>    flex-grow: 0;</span></span>
<span class="line"><span>    flex-shrink: 1;</span></span>
<span class="line"><span>    flex-basis: 100px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/350197601da5400cbe593f8aaab5595e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/MWGOGwE" target="_blank" rel="noreferrer">https://codepen.io/airen/full/MWGOGwE</a></p></blockquote><p>正如你所见，如果 Flex 项目上同时显式设置了 <code>width</code> 和 <code>flex-basis</code> 值（非 <code>auto</code> 默认值）时，<code>flex-basis</code> 属性的值将会替代 <code>width</code> 的值。但是：</p><ul><li>当 Flex 项目的 <code>flex-basis</code> 值小于 <code>width</code> 值，且 <code>width</code> 值小于 Flex 项目的内容最小值（<code>min-content</code>）时，Flex 项目的 <code>flex-basis</code> 的值会等于 <code>width</code> 属性值；</li></ul><ul><li>当 Flex 项目的 <code>flex-basis</code> 值小于 <code>width</code> 值，但 <code>width</code> 值大于 Flex 项目的内容最小值（<code>min-content</code>）时，Flex 项目的 <code>flex-basis</code> 的值会等于 Flex 项目的内容最小值（<code>min-content</code>）；</li></ul><ul><li>当 Flex 项目的 <code>flex-basis</code> 值大于 <code>width</code> 值，但小于 Flex 项目的内容最小值（<code>min-content</code>）时，Flex 项目的 <code>flex-basis</code> 的值会等于 <code>width</code> 属性值；</li></ul><ul><li>当 Flex 项目的 <code>flex-basis</code> 值大于 <code>width</code> 值，且同时大于 Flex 项目的内容的最小值，Flex 项目的 <code>flex-basis</code> 值不会被任何其他值所替代。</li></ul><p>虽然如此，但是在 Flex 项目上只要同时显式设置了 <code>flex-basis</code> 和 <code>width</code> 两属性的值，浏览器都将 Flex 项目的初始化尺寸（假想主尺寸）视为 <code>flex-basis</code> 的值。</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    flex-basis: 100px;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 等同于 */</span></span>
<span class="line"><span>.item {</span></span>
<span class="line"><span>    flex-basis: 100px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面代码中，Flex 项目初始化的假想主尺寸都会是 <code>100px</code> ，也就是说，浏览器在根据 Flex 容器剩余空间（或不足空间）、Flex 项目的 <code>flex-grow</code> 或 <code>flex-shrink</code> 计算 <code>flex-basis</code> 最终值时，它（<code>flex-basis</code>）的最初基础都将是 <code>100px</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51db131223a543f1b2a364f305effd68~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>这也就是，<strong>Flex 项目的总宽度（<code>width</code>属性值总和）大于 Flex 容器空间（即 Flex 容器产生不足空间），但 Flex 项目的</strong> <strong><code>flex-basis</code></strong> <strong>显式设置了</strong> <strong><code>0</code></strong> <strong>或</strong> <strong><code>0%</code></strong> <strong>时，即使 Flex 项目的</strong> <strong><code>flex-shrink</code></strong> <strong>（收缩因子）是非</strong> <strong><code>0</code></strong> <strong>的值，比如</strong> <strong><code>1</code></strong> <strong>或大于</strong> <strong><code>1</code></strong> <strong>的其他值，Flex 项目也不会按收缩比例分配 Flex 容器的不足空间。最终</strong> <strong>Flex 项目的</strong> <strong><code>flex-basis</code></strong> <strong>值等于 Flex 项目的内容最小尺寸（<code>min-content</code>）</strong> 。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a1cfd3f6cdc4585af84ffee0a95105a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/YzLELvX" target="_blank" rel="noreferrer">https://codepen.io/airen/full/YzLELvX</a></p></blockquote><p>因此，<strong>如果你要给 Flex 项目设置一个初始化的尺寸（一个假设的主尺寸或者说一个理想的尺寸），应该尽可能地在 Flex 项目使用</strong> <strong><code>flex-basis</code></strong> <strong>来设置这个初始化尺寸</strong> 。这样做可以更直接地告诉浏览器，Flex 项目的初始化主尺寸有多大。因为浏览器在计算 Flex 项目的 <code>flex-basis</code> 最终值都和 Flex 项目的初始化的 <code>flex-basis</code> 值有关联。<strong>这里是不是有一种此</strong> <strong><code>flex-basis</code></strong> <strong>非彼</strong> <strong><code>flex-basis</code></strong> <strong>的感觉</strong> （绕晕没）！</p><p>在 Flexbox 布局中，只要给 Flex 项目显式设置了 <code>flex-basis</code> 的值，就有可能会造成 Flex 容器有剩余空间或不足空间。不过在默认情况之下，Flex 容器有剩余空间时，Flex 项目不会自动扩展，这是因为 Flex 项目的 <code>flex-grow</code> 默认值为 <code>0</code>，但 Flex 容器只要有不足空间，Flex 项目就会自动收缩，这是因为 Flex 项目的 <code>flex-shrink</code> 的默认值为 <code>1</code> 。</p><p>另外一点，Flexbox 布局中的 <code>flex-basis</code> 值，浏览器最终计算的 <code>flex-basis</code> 最终值也会像 <code>width</code> 属性一样，受 <code>min-width</code> （或 <code>min-inline-size</code>）、<code>min-height</code> （或 <code>min-block-size</code>）、<code>max-width</code> （或 <code>max-inline-size</code>）和 <code>max-height</code> （或 <code>max-block-size</code>）值的限制。</p><p>前面已经说过，在 CSS 中，如果元素同时出现 <code>width</code> 、<code>min-width</code> 和 <code>max-width</code> 属性时，其权重计算遵循以下规则：</p><ul><li>如果元素的 <code>width</code> 值大于 <code>max-width</code> 值时，<code>max-width</code> 会覆盖 <code>width</code> 值，最终取 <code>max-width</code> 值；</li></ul><ul><li>如果元素的 <code>width</code> 值小于 <code>min-width</code> 值时，<code>min-width</code> 会覆盖 <code>width</code> 值，最终取 <code>min-width</code> 值；</li></ul><ul><li>如果 <code>min-width</code> 值大于 <code>max-width</code> 值时，<code>min-width</code> 的优先级将高于 <code>max-width</code> 值，最终会取 <code>min-width</code> 。</li></ul><blockquote><p>这些规则同样适用于 <code>height</code> 、<code>min-height</code> 和 <code>max-height</code> 以及它们对应的 CSS 逻辑属性！</p></blockquote><p>那么在 Flex 项目上，同时出现 <code>width</code> 、<code>flex-basis</code> 和 <code>min-width</code> 时，具体的运算过程如下：</p><ul><li>根据“<code>content</code> ➜ <code>width</code> ➜ <code>flex-basis</code>”法则，先判断出运用于 Flex 项目的初始化的值，即 <code>flex-basis</code> 会运用于 Flex 项目；</li></ul><ul><li>再将计算出的 <code>flex-basis</code> 值和 <code>min-width</code> 值作比较，如果 <code>flex-basis</code> 值小于 <code>min-width</code> 值，则 Flex 项目的最终值为 <code>min-width</code> 值，即 <strong><code>min-width</code></strong> <strong>值会覆盖</strong> <strong><code>flex-basis</code></strong> <strong>的值作为 Flex 项目的最终值</strong> 。</li></ul><p>比如：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    flex-basis: 100px;</span></span>
<span class="line"><span>    min-width: 180px;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>最终所有 Flex 项目的初始化值（Base Size）是 <code>100px</code> ，最小值（Minimum Size）是 <code>180px</code> ，浏览器最终计算出来的 <code>flex-basis</code> 值也会是 <code>min-width</code> 值，即 <code>180px</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dff67f72a8db4b56bd982397d90bcf07~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/jOxaxjK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/jOxaxjK</a></p></blockquote><p>如果 Flex 项目同时出现 <code>width</code> 、<code>flex-basis</code> 和 <code>max-width</code> 时，具体的运算过程如下：</p><ul><li>根据“<code>content</code> ➜ <code>width</code> ➜ <code>flex-basis</code>”法则，先判断出运用于 Flex 项目的初始化的值，即 <code>flex-basis</code> 会运用于 Flex 项目；</li></ul><ul><li>再将计算出的 <code>flex-basis</code> 值与 <code>max-width</code> 比较，如果 <code>flex-basis</code> 的值大于 <code>max-width</code> 值，则 <code>flex-basis</code> 的最终值是 <code>max-width</code> 值，即 <strong><code>max-width</code></strong> <strong>值会覆盖</strong> <strong><code>flex-basis</code></strong> <strong>的值</strong> 。</li></ul><p>比如：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    flex-basis: 300px;</span></span>
<span class="line"><span>    max-width: 100px;</span></span>
<span class="line"><span> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>最终所有 Flex 项目的初始化值（Base Size）是 <code>300px</code> ，最大值（Maximum Size）是 <code>100px</code> ，浏览器最终计算出来的 <code>flex-basis</code> 值也会是 <code>max-width</code> 值，即 <code>100px</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71dfe17b4f89406c8c30bb6300ac5a16~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/XWqzBJj" target="_blank" rel="noreferrer">https://codepen.io/airen/full/XWqzBJj</a></p></blockquote><p>如果 Flex 项目同时出现 <code>width</code> 、<code>flex-basis</code> 、<code>min-width</code> 和 <code>max-width</code> 时，会在上面的规则上增加新的一条规则来进行判断：</p><blockquote><p><strong>当</strong> <strong><code>min-width</code></strong> <strong>大于<code>max-width</code>时，<code>min-width</code>优先级将高于</strong> <strong><code>max-width</code></strong> <strong>。</strong></p></blockquote><p>然后再与 <code>flex-basis</code> 的值相比，<strong><code>flex-basis</code>会<code>min-width</code></strong> <strong>值</strong> 。反之，如果 <code>min-width</code> 小于 <code>max-width</code> 时，计算出来的 <code>flex-basis</code> 分别与 <code>min-width</code> 和 <code>max-width</code> 相比，如果小于 <code>min-width</code> 则取 <code>min-width</code> ，如果大于 <code>max-width</code> 则取<code>max-width</code> 。</p><p>比如：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    width: 150px;</span></span>
<span class="line"><span>    flex-basis: 300px;</span></span>
<span class="line"><span>    min-width: 120px;</span></span>
<span class="line"><span>    max-width: 100px;</span></span>
<span class="line"><span> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/002a1196d0c84922b37a90bf14c785b0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/WNJXKGe" target="_blank" rel="noreferrer">https://codepen.io/airen/full/WNJXKGe</a></p></blockquote><p>如果你理解了的话，可以使用更简单的规则来决定 Flex 项目的尺寸。</p><blockquote><p><strong>首先根据</strong> <strong><code>content</code></strong> <strong>➜</strong> <strong><code>width</code></strong> <strong>➜</strong> <strong><code>flex-basis</code></strong> <strong>来决定用哪个值来初始化 Flex 项目的假设主尺寸。如果 Flex 项目显式设置了</strong> <strong><code>flex-basis</code></strong> <strong>属性，则会忽略</strong> <strong><code>width</code></strong> <strong>和</strong> <strong><code>content</code></strong> <strong>。但最终浏览器计算出来的 Flex 项目主尺寸（计算后的</strong> <strong><code>flex-basis</code></strong> <strong>属性的值）会受到 CSS 的</strong> <strong><code>min-*</code></strong> <strong>和</strong> <strong><code>max-*</code></strong> <strong>属性值的限制，其中</strong> <strong><code>min-*</code></strong> <strong>用来设置 Flex 项目的下限值，<code>max-*</code>用来设置 Flex 项目的上限值</strong> 。</p></blockquote><p>我们可以用一个简单的流程图来描述：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fd53dfe373544b1bcea983c9a64d3db~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><h2 id="flex-项目的最小值-min-size" tabindex="-1">Flex 项目的最小值（min-size） <a class="header-anchor" href="#flex-项目的最小值-min-size" aria-label="Permalink to &quot;Flex 项目的最小值（min-size）&quot;">​</a></h2><p>在使用 Flexbox 布局的时候，很有可能其中某个 Flex 项目的文本内容很长，最终导致内容溢出：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c99159a177b24aa6a7354b9e2c639eca~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>你可能想到了在文本节点容器（它也是一个 Flex 项目）上设置：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>/* ① 长单词断行，常用西文 */</span></span>
<span class="line"><span>.long-word {</span></span>
<span class="line"><span>    overflow-wrap: break-word;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* ② 文本截取，末尾添加 ... */</span></span>
<span class="line"><span>.text-overflow {</span></span>
<span class="line"><span>    white-space: nowrap;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    text-overflow: ellipsis;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* ③ 多行文本截取，末尾添加... */</span></span>
<span class="line"><span>.line-clamp {</span></span>
<span class="line"><span>    --line-clamp: 1;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    text-overflow: ellipsis;</span></span>
<span class="line"><span>    display: -webkit-box;</span></span>
<span class="line"><span>    -webkit-line-clamp: var(--line-clamp);</span></span>
<span class="line"><span>    -webkit-box-orient: vertical;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>诸如此类的操作，我们只是希望防止内容（或长单词破坏页面布局）。如下图所示：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ba26834f7964691acb745ac8d2ace2b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>设计师期望卡片标题在同一行，不能因为内容过长而让设计效果失去一致性。为此，我们可以使用上面代码 ② 来截取文本，并且在文本末尾出现三个点的省略号：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.text-overflow {</span></span>
<span class="line"><span>    white-space: nowrap;</span></span>
<span class="line"><span>    overflow: hidden;</span></span>
<span class="line"><span>    text-overflow: ellipsis;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0989b0b716ed416aa4fbadbf7d39af28~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>或者输入了恶意的内容，比如带下划线的URL或没有空格的数字，字母等：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc105762121e4b3f8c6edd62bcaa6031~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在这样的布局中，即使我们的标题元素是一个 Flex 项目，并且已显式设置了 <code>flex</code>：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span> .card__title { </span></span>
<span class="line"><span>     flex: 1 1 0%; </span></span>
<span class="line"><span> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>你会发现，卡片右侧的 Icon 还是被长内容挤出容器（溢出）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a9d0d79eb244a1da598772860fbf177~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>你可能会想到，使用上面代码 ① 让长词断行显示：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.long-word { </span></span>
<span class="line"><span>    overflow-wrap: break-word; </span></span>
<span class="line"><span> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>你会发现，并未起效果：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f601099bb55949e08a4e8b10402a71b2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>即使你加了 <code>hyphens</code> 为 <code>auto</code> 也未生效。</p><p>你可能会认为它是一个 Flexbox 中的 Bug，事实上，<a href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto" target="_blank" rel="noreferrer">W3C规范中也有相应的描述</a>：</p><blockquote><p>On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size.</p></blockquote><p>大致意思上说：“<strong>主轴上 Flex 项目的</strong> <strong><code>overflow</code></strong> <strong>属性是</strong> <strong><code>visible</code></strong> <strong>时，主轴上 Flex 项目的最小尺寸（min-size）将会指定一个自动的（automatic）最小尺寸</strong> ”。前面我们也提到过：</p><blockquote><p>默认情况下，Flex 项目（设置为 <code>flex:1</code> 的 Flex 项目）在收缩的时候，其宽度不会小于其最小内容尺寸（即 <code>min-content</code>）。<strong>要改变这一点，需要显式设置</strong> <strong><code>min-width</code></strong> <strong>或</strong> <strong><code>min-height</code></strong> <strong>的值</strong> 。</p></blockquote><p>因此，我们要解决这个问题，需要在使用 <code>overflow-wrap</code> 为 <code>break-word</code> 的地方重置 <code>min-width</code> 值，并且强制它变成<code>0</code>：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.long-word { </span></span>
<span class="line"><span>    overflow-wrap: </span></span>
<span class="line"><span>    break-word; </span></span>
<span class="line"><span>    min-width: 0; </span></span>
<span class="line"><span> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>另外，要提出的是，Flex 项目的 <code>overflow</code> 的值为 <code>visible</code> 以外的值时会导致 <code>min-width</code> 的值为 <code>0</code>，这就是为什么在方法 ② 中做文本截取的时候，怎么没有 <code>min-width: 0</code>。</p><p>还有，Flex 项目的长文本（<code>max-content</code>）或显式设置 <code>white-space: nowrap</code> 在视觉上除了会打破布局之外，也会对相邻的 Flex 项目进行挤压，即使这些 Flex 项目显式设置了尺寸。比如上面的示例：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__media { </span></span>
<span class="line"><span>    width: 4em; </span></span>
<span class="line"><span>    aspect-ratio: 1; </span></span>
<span class="line"><span>} </span></span>
<span class="line"><span></span></span>
<span class="line"><span>.card__action { </span></span>
<span class="line"><span>    width: 3em; </span></span>
<span class="line"><span>    aspect-ratio: 1; </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>你会发现，后面三张卡片的左右两侧的 Flex 项目尺寸被挤压，甚至还会造成视觉上的变形：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce17b396b8834ee5ae7bac30a61b2efc~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>造成这个现象是由于标题（它也是一个 Flex 项目）内容过长（<code>max-content</code>），Flexbox 容器无剩余空间来放置它，这个时候将会对同一轴上的其他 Flex 项目进行挤压。大家知道，Flex项目的 <code>flex</code> 的默认值为：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.item {</span></span>
<span class="line"><span>    flex-grow: 0;</span></span>
<span class="line"><span>    flex-shrink: 1;</span></span>
<span class="line"><span>    flex-basis: auto;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>flex-shrink</code> 的值为 <code>1</code>，表示 Flex 项目可以被收缩。解决这种现象，我们有两种方法，最简单的方法是在标题这个 Flex 项目元素上显式设置 <code>min-width</code> 的值为 <code>0</code>：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__title {</span></span>
<span class="line"><span>    min-width: 0;</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6c92d60bd0f4fe586469870cffa0333~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>另一种解法是在显式设置了 <code>width</code> 或 <code>height</code> 的 Flex 项目上重置 <code>flex-shrink</code> 的值为 <code>0</code>，告诉浏览器，即使 Flexbox 容器没有足够的剩余空间，你也不能来挤压我的空间：</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span>.card__media, </span></span>
<span class="line"><span>.card__action { </span></span>
<span class="line"><span>    flex-shrink: 0; </span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26c6d7d9467049c090357ca114a9ad30~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>相对而言，或者一劳永逸的方案是 <strong>在显式设置了<code>flex: 1</code>的 Flex 项目的同时，也显式设置<code>min-width</code>的值为<code>0</code></strong> 。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad043bb7610e4bf481ec9a69eaa48167~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/NWMwLmX" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWMwLmX</a></p></blockquote><p>这里有一个小技巧，<strong>Flexbox 布局中要实现均分列（等分列）布局效果时，请在 Flex 项目上显式设置</strong> <strong><code>min-width</code></strong> <strong>的值为</strong> <strong><code>0</code></strong> <strong>，避免因内容不等长，造成列不均等</strong> 。</p><h2 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-label="Permalink to &quot;小结&quot;">​</a></h2><p>现在我们明白了，Flex 项目上的 <code>width</code> 只是 <code>flex-basis</code> 缺失时的备用值，在代码中显式设置的 <code>flex-basis</code> 也只是你假想的一个主尺寸，它的最终值会根据 Flex 容器剩余空间（或不足空间）以及 Flex 项目的扩展因子（或收缩因子）而有所不同。并且最终计算出来的 <code>flex-basis</code> 会受到 <code>min-*</code> （Flex 项目的下限值）和 <code>max-*</code> （Flex 项目的上限值）限制。</p><p>你可能也已经注意到了，<code>flex-basis</code> 其实就是 <strong>将 Flex 项目放入弹性容器之前的大小</strong> 。这个值仅仅是一个理想或假设的值（即，开发者根据设计稿给 Flex 项目定义的一个最理想化的值）。但这个时候的值绝对不是 <code>flex-basis</code> 的最终值。因为 Flex 项目一旦放入 Flex 容器之后，Flex 项目的 <code>flex-basis</code> 就会发生变化，浏览器会根据相应的环境给 Flex 项目计算出一个最终的 <code>flex-basis</code> 值，而这个最终计算出来的 <code>flex-basis</code> 值也是 Flex 项目的最终尺寸（大小）。</p><p>现在我们明白了，这<code>width</code>只是<code>flex-basis</code>缺失时的后备，并且<code>min-width</code>和<code>max-width</code> 只是 <code>flex-basis</code> 的上限和下限。那么，<code>flex-basis</code> 究竟是什么？</p><p>在我们所有的插图中，我们在将 Flex 项放入 Flex 容器<strong>之前将它们的大小可视化。</strong> 我们这样做是因为<code>flex-basis</code>就是：<strong>将弹性项目放入弹性容器之前的大小</strong>。这是物品的理想或假设尺寸。但<code>flex-basis</code>不是<strong>保证尺寸</strong>！一旦浏览器将项目放入其 Flex 容器中，情况就会发生变化。</p><p>在我们上面的一些示例中，你看到弹性项目完全适合它们的弹性容器，因为所有项目的总和最终<code>flex-basis</code>是我们容器的确切宽度（1000px）。<code>flex-basis</code>发生这种情况时这很好，但通常弹性容器没有足够的空间，或者在其所有项目的值加起来之后会有额外的空间。</p><p>所以说，最终决定 Flex 项目大小的会由 <strong>Flex 容器的剩余空间（或不足空间）</strong> 、<strong>Flex 项目的理想主尺寸（Flex 项目的初始化值）</strong> 、<strong>Flex 项目的扩展因子</strong> （<code>flex-grow</code> 值）或 <strong>Flex 项目的收缩因子</strong> （<code>flex-shrink</code> 值）、 <strong>Flex 项目的最小内容（或最大内容）长度值</strong> 以及 <strong>Flex 项目的下限值（<code>min-*</code>值）和（或）Flex 项目的上限值（<code>max-*</code>值）</strong> 来决定。</p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>10.7k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>39 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-03-04T16:28:46.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link prev" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/07" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>上一篇</span><span class="title" data-v-73a75ed6>Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</span><!--]--></a></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/09" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>使用 Flexbox 构建经典布局：10 种经典 Web 布局</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>